import NavBar from "@/components/menus/NavBar";
import { View } from "@tarojs/components";
import { Success, Fail } from "@taroify/icons";
import ShowUserInfo from "@/components/user/ShowUserInfo";
import { getUser } from "@/utils/auth";
import { selectSectorPage, examineSectorApplyApi } from "@/api";
import { useRef, useState } from "react";
import { Button, Dialog, List, Loading } from "@taroify/core";
import Taro from "@tarojs/taro";
import ModalInput from "@/components/common/ModalInput";

export default () => {
  const user = getUser();
  const [list, setList] = useState<Array<any>>([]);
  const [hasMore, setHasMore] = useState(true);
  const [loading, setLoading] = useState(false);
  const [open, setOpen] = useState(false);
  const [cur, setCur] = useState("");

  const [value, setValue] = useState("");
  const pager = {
    pageNum: 0,
    pageSize: 20,
  };
  function getData() {
    pager.pageNum++;
    selectSectorPage({ checkFlag: 0, ...pager }).then((res) => {
      setList(res.records);
    });
  }
  async function apply(checkFlag, kid, checkContext?, userId?) {
    await examineSectorApplyApi({ checkFlag, kid, checkContext, userId });
    pager.pageNum = 0;
    getData();
  }
  return (
    <NavBar title="审核板块（吧）">
      <List loading={loading} hasMore={hasMore} onLoad={() => getData()}>
        <View className="grid grid-cols-1 gap-2 ">
          {list.map((item, i) => (
            <View className="flex gap-4" key={i}>
              <ShowUserInfo
                size="medium"
                avatar={user.avatar}
                userID={user.kid}
              />
              <View className="flex text-xs items-center">
                {item.sectorName}
              </View>
              <Button.Group
                size="small"
                variant="contained"
                shape="round"
                className="w-32"
              >
                <Button
                  color="primary"
                  onClick={() => apply("1", item.kid, "", item.userId)}
                >
                  <Success /> 通过
                </Button>
                <Button
                  color="danger"
                  onClick={() => {
                    setCur(item.kid);
                    setOpen(true);
                  }}
                >
                  驳回 <Fail />
                </Button>
              </Button.Group>
            </View>
          ))}
        </View>

        <List.Placeholder>
          {loading && <Loading>加载中...</Loading>}
          {!hasMore && "没有更多了"}
        </List.Placeholder>
      </List>
      <ModalInput
        open={open}
        setOpen={setOpen}
        title="驳回板块申请"
        placeholder="驳回理由"
        change={setValue}
        confirm={() => apply(2, cur, value)}
      />
    </NavBar>
  );
};
